Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2017, 14:20
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

on(klick) элемента который не содержится в DOM
Всем доброго времени суток... В js чайник.

на странице есть форма, данные из формы передаются ajax методом, в обработчик *.php, который записывает в БД эти данные, выводит массив то что записалось, в виде таблицы, к каждой строчке прикручена ссылка типа <div class='delite' id='delite'><a href='Delite.php?a=".$a."&b=".$b."&c=".$c."'><img src='images/delite.png'></a></div>. всё это подгружается в ту же форму, откуда были отправлены данные. Я как понимаю то что подгрузилось нет в DOM, а значить нельзя ещё раз вызвать функцию на элементе id='delite'. или можно? Что бы при нажатии на ссылку так же как и при отправке данных, не потерялись данные введённые в форму, и при этом обработчик удалил строку a=".$a."&b=".$b."&c=".$c." и перегрузил эту таблицу без этой строки(потому что он её удалил)
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2017, 15:41
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

может мне разжуёт чё это такое и как это работает, как применить.

$('parent_static_element').on('event', 'dinamic_element', function(){
 
});
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2017, 15:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Денис_кам-ур,
https://learn.javascript.ru/event-delegation
'parent_static_element' постоянный элемент страницы
'dinamic_element' элементы внутри постоянного (могут добавлятся динамически)
'event' click или иное событие.
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2017, 16:10
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

рони,
спасибо
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2017, 16:26
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

у меня есть вот это для отправки данных обработчику.

$(function(){
var output = $('#output');
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
        formData = $that.serializeArray();
        // ИЛИ 
        // formData = $that.serialize();
    $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      dataType: 'html',
      data: {form_data: formData},
      beforeSend: function(){
        output.text('Передача данных. Ждите ответа.');
      },
      success: function(a){
        output.html(a);
      }
    });
  });
});


как мне сделать чтобы не только на submit работала но и на <input type='image' src='images/delite.png' id='dinamic_element'>

$(function(){
var output = $('#output');
  $('#output').on('event', 'dinamic_element', function(e){ //<div id='output'></div>

    e.preventDefault();
    var $that = $(this),
        formData = $that.serializeArray();
        // ИЛИ 
        // formData = $that.serialize();
    $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      dataType: 'html',
      data: {form_data: formData},
      beforeSend: function(){
        output.text('Передача данных. Ждите ответа.');
      },
      success: function(a){
        output.html(a);
      }
    });
  });
});

Последний раз редактировалось Денис_кам-ур, 21.01.2017 в 16:39.
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2017, 16:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Денис_кам-ур,
$(function() {
$('#output').on('click', '#dinamic_element', function(e){
   $('#my_form').trigger('submit')
 })
});
Ответить с цитированием
  #7 (permalink)  
Старый 24.01.2017, 09:01
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

не понимаю....
$(function() {
$('#output').on('click', '#dinamic_element', function(e){
   $('#my_form').trigger('submit')

    e.preventDefault();
    var $that = $(this),
        formData = $that.serializeArray();
        // ИЛИ 
        // formData = $that.serialize();
    $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      dataType: 'html',
      data: {form_data: formData},
      beforeSend: function(){
        output.text('Передача данных. Ждите ответа.');
      },
      success: function(a){
        output.html(a);
      }
    });
  });
});


в субботу код работал, сейчас нет. ни чего не менял... вроде...


<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type='text/javascript' src='Ajax.js'></script>
</head>
<body>
<img src='images/logo.png'>
<center>Промежуточный контроль физико-механических показателей пропантов</center>
<form action='NewGotovaya.php' method='POST' id='my_form'>
Дата <input name='date' id='date' type='date' min='01-01-2000' max='01-01-2100' required>
Дата изготовления пропанта-сырца <input name='dateizgotovleniya' id='dateizgotovleniya' type='date' min='01-01-2000' max='01-01-2100' required>
Изготовитель <select name='izgotovitel' id='izgotovitel'>
<option>Сухой Лог</option>
<option>Асбест</option>
<option>Шадринск</option>
</select>
Фракция <select name='frakciyax' id='frakciyax'>
<option>6</option>
<option>10</option>
<option>12</option>
<option>16</option>
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<select name='frakciyay' id='frakciyay'>
<option>10</option>
<option>14</option>
<option>18</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>70</option>
</select>
Линия <select name='liniya' id='liniya'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
№ партии <input name='partiya' id='partiya' type='number' step='1' required>
Фамилия мастера смены-изготов. <select name='master' id='master'>
<option>Панкратов</option>
<option>Русских</option>
<option>Симонов</option>
<option>Прошкин</option>
<option>Низовцев</option>
<option>Суднев</option>
<option>Огнев</option>
<option>Хорозов</option>
<option>Востряков</option>
<option>Батаков</option>
<option>Зотеев</option>
<option>Теплов</option>
<option>Волчанин</option>
<option>Кадорбаев</option>
<option>Калетин</option>
<option>Новосёлов</option>
<option>Терещенко</option>
<option>Тимухин</option>
<option>Неустроев</option>
<option>Бодренко</option>
<option>Спиридонов</option>
<option>Шестернин</option>
<option>Демин</option>
<option>Кошелев</option>
<option>Панов</option>
<option>Епифанов</option>
<option>Кобзев</option>
<option>Каштанов</option>
<option>Озорнин</option>
<option>Семин</option>
<option>Бессонов</option>
<option>Жульянов</option>
<option>Константинов</option>
<option>Тарабаев</option>
</select>
ГОСТ <select name='gost' id='gost'>
<option>---------</option>
<option>---------</option>
<option>---------</option>
<option>---------</option>
</select>
ТУ <select name='tu' id='tu'>
<option>1522-015-50298370-2006</option>
<option>5714-034-50298370-2008</option>
</select>
№ МКР <input name='mkr' id='mkr' type='number' step='1' required>
Насыпная плотность, г/см<sup>3</sup> <input name='plotnost' id='plotnost' type='number' step='0.01'>
Содержание основной фракции, % <input name='granulomsostavplusosnovnayafrakciya' id='granulomsostavplusosnovnayafrakciya' type='number' step='0.1'>
Механическая прочность, г <input name='prochnoct' id='prochnoct' type='number' step='0.1'>
Обжигальщик <select name='obzhigalshik' id='obzhigalshik'>
<option>Щелконогов</option>
<option>Камалов</option>
<option>Гарейханов</option>
<option>Афонин</option>
<option>Бахарев</option>
<option>Пестряков</option>
<option>Пузько</option>
<option>Гузов</option>
</select>
<input type='submit' id='submit' value='сохранить'/>
</form>
<div id='output'></div>
</body>
</html>


файл подключен правильно, даже прописывал js в html - не работает.
предыдущий вариант работает....

$(function(){
var output = $('#output');
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
        formData = $that.serializeArray();
        // ИЛИ 
        // formData = $that.serialize();
    $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      dataType: 'json',
      data: {form_data: formData},
      beforeSend: function(){
        output.text('Передача данных. Ждите ответа.');
      },
      error: function(req, text, error){
        output.text('Ошибка. ' + text + ' | ' + error);
      },
      complete: function(){
        output.append('<p>Запрос полностью завершен.</p>');
      },
      success: function(json){
        output.html(json);
      }
    });
  });
});


может кто подскажет ?

Последний раз редактировалось Денис_кам-ур, 24.01.2017 в 09:04.
Ответить с цитированием
  #8 (permalink)  
Старый 24.01.2017, 09:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Денис_кам-ур,
вы пробелов напихали в js
Ответить с цитированием
  #9 (permalink)  
Старый 24.01.2017, 09:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Денис_кам-ур,
вырезать все &nbsp; из скриптов
Ответить с цитированием
  #10 (permalink)  
Старый 24.01.2017, 09:19
Интересующийся
Отправить личное сообщение для Денис_кам-ур Посмотреть профиль Найти все сообщения от Денис_кам-ур
 
Регистрация: 11.11.2014
Сообщений: 28

рони,
не помогло
кодировка UTF-8 без BOM окончание строк Unix
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить порядковый номер элемента DOM ? dummer jQuery 7 17.01.2014 17:44
ID элемента в который входит элемент MCTrane Общие вопросы Javascript 2 10.12.2010 14:07
onClick эвент для всего документа, кроме отдельно взятого элемента DOM el_erizo Events/DOM/Window 5 19.03.2010 15:09
удаление DOM элемента и перезагрузка страницы Andrey2005 Общие вопросы Javascript 3 12.10.2009 23:49
Как определить id дочернего элемента DOM? Motonto Events/DOM/Window 1 09.04.2009 08:13